<template>
	<div class="content">
		<mt-header title="时光轴" fixed class="nav">
			<mt-button icon="back" @click="_back" slot="left"></mt-button>
		</mt-header>
		<div id="lessonNum" v-if="lessonArr.length>0">
			<ul class="lessonNav">
				<li v-for="(x,index) in lessonArr" :class="{active:x.lessonid==activelessonid}" @click="checkLesson(x.lessonid,index)">
					<div class="left">
						<i></i>
						<span>{{ x.courseName }}</span>
					</div>
					<span class="right">
						{{ x.time }}
					</span>
				</li>
			</ul>
		</div>
		<ul class="lessonContent" v-if="lessonArr.length>0">
			<li v-for="x in actionArr">
				<i></i>
				<i></i>
				<div class="center">
					<span class="time">{{ x.time }}</span>
					<span class="action">{{ x.action }}</span>
				</div>
			</li>	
		</ul>
		<div class="noData" v-if="lessonArr.length==0">
			抱歉暂时没有数据 
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { mapState, mapMutations } from 'vuex'
    import api from '../../api'
	export default{
		created(){
			var that = this;
			this.INIT_STATE();
			api.getClassLessonRecordsOfStudent({
				classid:this.userlogin.classid,
				dayfrom: this.$route.params.day,
				dayto:this.$route.params.day
			}).then(response =>{
				that.lessonArr = response.data.data.lessonDatas
				that.activelessonid = that.lessonArr[0].lessonid
				that.actionData = response.data.data.lessonRecordMap
				that.actionArr = that.actionData[that.activelessonid]				
				$(".lessonNav").css("width",2.73*that.lessonArr.length+4.34+"rem")
			})
			$(function(){
				var h =document.body.clientHeight;
  				$('.content').css('min-height', h-36-49+'px')	
			})
			
		},
		activated(){	
			console.log(this)
			var that = this;
			this.INIT_STATE();
			api.getClassLessonRecordsOfStudent({
				classid:this.userlogin.classid,
				dayfrom: this.$route.params.day,
				dayto:this.$route.params.day
			}).then(response =>{
				console.log(response)
				that.lessonArr = response.data.data.lessonDatas
				that.activelessonid = that.lessonArr[0].lessonid
				that.actionData = response.data.data.lessonRecordMap
				that.actionArr = that.actionData[that.activelessonid]
				$(".lessonNav").css("width",2.73*that.lessonArr.length+4.34+"rem")
			})
		},
		data(){
			return{
				lessonArr:[],
				actionArr:[],
				actionData:[],
				activelessonid:0
			}
		},
		computed:{
			...mapState(['userlogin'])
		},
		methods:{
			...mapMutations(['INIT_STATE']),
			_back(){
				window.history.back()
			},
			checkLesson(lid,i){
				this.activelessonid = lid
				var liWidth=$('li').width();
				this.actionArr = this.actionData[this.activelessonid]
				$("#lessonNum").animate({"left":parseInt(-i*liWidth)})
				console.log(i*liWidth)
			}
		}
	}
	
	
</script>

<style scoped>
	.nav{
		z-index: 3;
		background: #FA8C13;
	}
	.content{
		background: #F7F7F7;
		padding-bottom: 0;
	}
	#lessonNum{
		height:67px;
		/*width: 10.06rem;*/
		background: #FFFFFF;
		overflow-x: scroll;
		position: fixed;
		top:36px;
		z-index: 3;
	}
	ul{
		margin: 0;
		padding: 0;
	}
	li{
		
		box-sizing: border-box;
	}
	.lessonNav{
		overflow-x: scroll;
		list-style: none;
		overflow: hidden;
		height:67px;
		padding-left: 0.13rem;
	}
	.lessonNav li{
		float:left;
		width: 2.73rem;
		height:67px;
		overflow: hidden;
		box-sizing: border-box;
		color: #4A4A4A;
	}
	.lessonNav li.active{
		
		color: #1382FA;
	}
	.lessonNav li.active .left i{		
		background-image:url(../../assets/images/lessonOn.png);
	}
	.lessonNav li .left{
		float:left;
		text-align: center;
		width: 0.56rem;
		height:67px;
		padding-top: 10px;
		box-sizing: border-box;
	}
	.lessonNav li .left i{
		display: inline-block;
		width:0.25rem ;
		height:17.5px;
		background: url(../../assets/images/lessonOff.png) no-repeat center;
		background-size:contain;
	}
	.lessonNav li .left span{
		display: inline-block;
		font-size: 14px;
		margin-top: 5.1px;
	}
	.lessonNav li .right{
		float:right;
		text-align:left;
		font-size: 14px;
		width: 1.74rem;
		height:20px;
		margin-right: 0.43rem;
		line-height: 20px;
		padding-top: 8.5px;
	}
	.lessonNav li .right:before{
		display: inline-block;
		content: '';
		width:2px;
		height:10px;
		background:  #D8D8D8;
		margin-right: 0.09rem;
	}
	.lessonContent{
		list-style: none;
		margin-top: 63px;
		position:relative;
	}
	.lessonContent li{
		width: 100%;
		height:63px;
		overflow: hidden;
		font-size: 0;
		padding-left: 0.39rem;
		position: relative;
	}
	.lessonContent li:before{
		position:absolute;
		content: '';
		width:1px;
		height:24.5px;
		background: #4A4A4A;
		top: 0;
		left: 0.52rem;
	}
	.lessonContent li:after{
		position:absolute;
		content: '';
		width:1px;
		height:24.5px;
		background: #4A4A4A;
		top: 38.5px;
		left: 0.52rem;
	}
	.lessonContent li i{
		float: left;
		width: 0.28rem;
	}
	.lessonContent li i:first-child{
		height:14px;
		background: url(../../assets/images/lessonHead.png) no-repeat center;
		background-size:110%;
		margin-top: 24.5px;
		position:relative;
		z-index: 2;
	}
	.lessonContent li i:last-of-type{
		height:3px;
		margin-top: 30px;
		background: url(../../assets/images/lessonShape.png) no-repeat center;
		background-size:contain;
		margin-left: 0.02rem;
	}
	.lessonContent li .center{
		float: left;
		width: 4.66rem;
		height:33px;
		line-height: 33px;
		background: #FFFFFF;
		border-radius: 8px;
		margin-top: 15px;
		margin-left: 0.24rem;
		text-align: left;
	}
	.lessonContent li .center .time{
		font-size: 12px;
		color: #9B9B9B;
		margin-left: 0.4rem;
	}
	.lessonContent li .center .action{
		font-size: 15px;
		color: #4A4A4A;
		margin-left: 0.95rem;
	}
	.noData {
		height: 250px;
		background: url(../../assets/images/noData.png) no-repeat center;
		background-size: 77px;
		color: #3C3C3C;
		font-size: 14px;
		line-height: 400px;
	}

</style>